<template>
  <div class="withdrawalliest">
    <div class="outmain ba_f">
      <div class="shuju_title mar_b20">
        <div class="shuju_title_text">
          <span>提现列表</span>
        </div>
      </div>
      <div class="pad_20 flex-bet">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
          <el-form-item label="门店名称">
            <el-input v-model="formInline.keyword" size="medium" placeholder="门店名称" @input="onSearch" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="提现状态">
            <el-select v-model="formInline.state" placeholder="请选择" @change="onSearch">
              <el-option v-for="item in withstate" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="提现状态">
            <el-select v-model="formInline.vipLabel" placeholder="请选择" style="width: 200px;" @change="onSearch">
              <el-option v-for="item in labelOptions" :key="item.id" :label="item.labelName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>-->
          <el-form-item label="提现时间">
            <el-date-picker @change="onSearch" v-model="formInline.timeData" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
          </el-form-item>
        </el-form>
        <!-- <div>
          <el-button size="medium">批量通过</el-button>
          <el-button size="medium">批量拒绝</el-button>
        </div>-->
      </div>
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" class="tablecenter">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="expand" style="width: 300px;">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="提现金额：">
                <span style="color:#fa4000;">{{ props.row.money }}</span>
              </el-form-item>
              <el-form-item label="手续费：">
                <span>{{ props.row.charge }}</span>
              </el-form-item>
              <el-form-item label="到账金额：">
                <span class="color-green">{{ props.row.actualMoney }}</span>
              </el-form-item>
              <el-form-item label="提现状态：">
                <span style="color: #489620" v-if="props.row.state == '2'">已通过</span>
                <span style="color:#333；" v-if="props.row.state == '1'">申请中</span>
                <span style="color: #df0029" v-if="props.row.state == '3'">已拒绝</span>
              </el-form-item>
              <el-form-item label="申请时间：">
                <span>{{ props.row.createdAt }}</span>
              </el-form-item>
              <el-form-item label="提现渠道：">
                <div v-if="props.row.type=='1'">微信</div>
                <div v-if="props.row.type=='2'">支付宝</div>
                <div v-if="props.row.type=='3'">银联</div>
              </el-form-item>
              <el-form-item label="提现账号：" v-if="props.row.type != 3">{{ props.row.account[props.row.type == 1 ? 'wxTel' : props.row.type == 2 ? 'aliTel' : 'bankTel'] }}</el-form-item>
              <template v-if="props.row.type == 1">
                <el-form-item label="用户信息：">{{ `${props.row.account.userName}(ID：${props.row.account.userId})` }}</el-form-item>
              </template>
              <template v-if="props.row.type == 2">
                <el-form-item label="真实姓名：">{{ props.row.account.aliUserName }}</el-form-item>
                <el-form-item label="手机号：">{{ props.row.account.aliTel }}</el-form-item>
              </template>
              <template v-if="props.row.type == 3">
                <el-form-item label="所属银行：">{{ props.row.account.bankName }}</el-form-item>
                <el-form-item label="所属支行：">{{ props.row.account.subBank }}</el-form-item>
                <el-form-item label="银行卡号：">{{ props.row.account.bankAccount }}</el-form-item>
                <el-form-item label="真实姓名：">{{ props.row.account.bankUserName }}</el-form-item>
                <el-form-item label="预留手机号：">{{ props.row.account.bankTel }}</el-form-item>
              </template>
              <el-form-item label="收款码：" v-if="props.row.type != 3">
                <span>
                  <img :src="props.row.account.wxImg || props.row.account.aliImg" class="listImgWidth" />
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="storeName" label="门店名称"></el-table-column>
        <el-table-column prop="type" label="提现渠道/账号">
          <template slot-scope="scope">
            <div v-if="scope.row.type=='1'">微信/{{scope.row.account.userId}}</div>
            <div v-if="scope.row.type=='2'">支付宝/{{scope.row.account.aliAccount}}</div>
            <div v-if="scope.row.type=='3'">银联/{{scope.row.account.bankAccount}}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="account" label="账户信息">
          <template slot-scope="scope">
            <div v-html="scope.row.account"></div>
          </template>
        </el-table-column>
        <el-table-column label="其他信息" width="100">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>
                <img :src="scope.row.txImg" class="listImgWidth" />
              </p>
              <div slot="reference" class="name-wrapper">
                <div class="imgbox">
                  <img :src="scope.row.txImg" class="tabimg" />
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>-->
        <el-table-column prop="money" label="提现金额"></el-table-column>
        <el-table-column prop="charge" label="手续费"></el-table-column>
        <el-table-column prop="actualMoney" label="到账金额"></el-table-column>
        <el-table-column label="提现状态">
          <template slot-scope="scope">
            <div>
              <span style="color: #489620" v-if="scope.row.state == '2'">已通过</span>
              <span style="color:#155BD4" v-if="scope.row.state == '1'">申请中</span>
              <span style="color: #df0029" v-if="scope.row.state == '3'">已拒绝</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="申请时间"></el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-dropdown class="more" v-show="scope.row.state=='1'">
              <el-button type="text" size="mini" class="mar_l10">
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <span v-show="scope.row.type=='1' && scope.row.state=='1'" @click="operate(scope.row.id,'makeAdopt')">微信零钱打款</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span v-show="scope.row.state=='1'" @click="operate(scope.row.id,'adopt')">通过（线下转款）</span>
                </el-dropdown-item>
                <el-dropdown-item>
                  <span v-show="scope.row.state=='1'" @click="operate(scope.row.id,'reject')">拒绝</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button size="mini" style="color: #489620" v-show="scope.row.state=='2'" type="text">已通过</el-button>
            <el-button size="mini" style="color: #df0029" v-show="scope.row.state=='3'" type="text">已拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import { shopWithdrawalList, modifyWithdrawal } from '@/api/shop';
import { changeDate } from '@/utils/index';
export default {
  data() {
    return {
      formInline: {
        keyword: '',
        timeData: '',
        state: ''
      },
      tableData: [],
      withstate: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '申请中'
        },
        {
          value: '2',
          label: '已通过'
        },
        {
          value: '3',
          label: '已拒绝'
        }
      ],
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      }
    };
  },
  created() {
    this.getWithdrawalList();
  },
  methods: {
    async getWithdrawalList() {
      var params = {
        page: this.page.currentPage,
        state: this.formInline.state
      };
      if (this.formInline.keyword) {
        params.keyword = this.formInline.keyword;
      }
      if (this.formInline.timeData) {
        this.formInline.startTime = changeDate(this.formInline.timeData[0]);
        this.formInline.endTime = changeDate(this.formInline.timeData[1]);
      }
      const { data, count } = await shopWithdrawalList(params);
      this.tableData = data;
      this.page.total = count;
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getWithdrawalList();
    },
    onSearch() {
      this.getWithdrawalList();
    },
    async operate(id, type) {
      const { msg } = await modifyWithdrawal({ id: id, type: type });
      this.$baseMessage(msg, 'success');
      this.getWithdrawalList();
    }
  }
};
</script>
<style lang="scss">
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  color: #155bd4;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 20px;
  width: 20%;
}

.withdrawalliest .tablecenter th,
.withdrawalliest .tablecenter td {
  text-align: left;
}

.el-form-item__content .el-input {
  width: 200px;
}
</style>
